/*
 * @Date: 2025-05-06 09:35:24
 * @LastEditors: lyx
 * @LastEditTime: 2025-05-06 16:17:06
 * @FilePath: \tpt-cnpc\src\components\Chat\components\Suggestions\index.tsx
 * @Description: 
 */
import React, { useEffect } from "react";
import "./index.less";
import showdownHighlight from "showdown-highlight";
import showdown from "showdown";
interface IProps {
  chatInfo: {
    msgId: string;
    dataId: string;
  };
  onCon: (text: string) => void;
  suggestion: {
    text: string;
    target: boolean;
    label?: string;
    type?: string;
  }[];
}

const Suggestions: React.FC<IProps> = ({ chatInfo, suggestion, onCon }) => {
  const idStr = `chat-suggestions-component-${chatInfo.msgId}-${chatInfo.dataId}`;
  // Component State
  // Component Event
  // Component Effect
  const converter = new showdown.Converter({
    extensions: [showdownHighlight],
    tables: true,
  });
  useEffect(() => {}, []);
  return (
    <div id={idStr} className={`chat-suggestions-component`}>
      {/* <div>{markdownStringSuggested}</div> */}
      {suggestion.map((item) => (
        <div className="suggested-item-wrapper">
          <div className="suggested-item">
            <div className="title">
              <div className="left">
                {item?.type === "reason" ? "异常原因" : "优化建议"}
              </div>
              {/* // TODO: 这边要判断是否是 乙烯装置 */}
              {/* {onCon && item.target && (
                <div
                  className="right"
                  onClick={() => {
                    onCon && onCon(item?.label ?? "");
                  }}
                >
                  {`立即优化>`}
                </div>
              )} */}
            </div>

            <div className="text">
              <div
                dangerouslySetInnerHTML={{
                  __html: converter.makeHtml(item.text),
                }}
              ></div>
            </div>
          </div>

          {item.target && (
            <div className="suggested-jy-wrapper">
              <div className="suggested-jy-title">
                是否需要我为您提供优化建议:
              </div>

              <div
                className="suggested-jy-item"
                onClick={() => {
                  onCon && onCon(item?.label ?? "");
                }}
              >
                是，请继续
              </div>
              <div className="suggested-jy-item">否，结束对话</div>
            </div>
          )}
        </div>
      ))}
    </div>
  );
};

export default Suggestions;
